<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>诊所管理系统</title>
    <script th:src="@{js/jquery-1.11.0.min.js}"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" th:src="@{https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js}"></script>
    <style type="text/css">
        #contentWrapper {
            width: 100%;
            height: 100%;
            position: relative;
        }
        #contentLeft {
            z-index: 10;
            width: 250px;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #283c51;
        }
        #contentRight {
            padding: 1.3rem 2rem;
            margin-left: 250px;
        }
        #leftNavigation {
            margin: 2rem 0;
        }
        #leftNavigation, #leftNavigation li ul {
            list-style: none;
            padding: 0;
        }
        #leftNavigation li a {
            font-size: 0.875rem;
            display: block;
            padding: 0.1rem 1rem 0.8rem 3rem;
            color: #adadad;
            border-bottom: solid 1px #395673;
            text-overflow: ellipsis;
            overflow: hidden;
            position: relative;
            -webkit-transition: color 0.2s ease;
            transition: color 0.2s ease;
        }

        #leftNavigation li a:hover {
            color: white;
        }
        #leftNavigation li ul {
            display: none;
            margin: 0;
            background-color: #17232f;
        }
        #leftNavigation li ul li a {
            border-bottom: solid 1px #233547;
        }
        #leftNavigation li ul li:last-child a {
            border-bottom: none;
        }
        #leftNavigation li ul li.active a {
            color: white;
        }
        #leftNavigation li.active > a {
            color: white;
        }
        #leftNavigation li.active ul {
            display: block;
        }
        #leftNavigation > li.active {
            background-color: #427c97;
        }
        .pure-table {
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #cbcbcb;
        }

        .pure-table caption {
            color: #000;
            font: italic 85%/1 arial,sans-serif;
            padding: 1em 0;
            text-align: center;
        }

        .pure-table td,.pure-table th {
            border-left: 1px solid #cbcbcb;
            border-width: 0 0 0 1px;
            font-size: inherit;
            margin: 0;
            overflow: visible;
            padding: .5em 1em;
        }

        .pure-table thead {
            background-color: #e0e0e0;
            color: #000;
            text-align: left;
            vertical-align: bottom;
        }

        .pure-table td {
            background-color: transparent;
        }
        .pure-table tr {
            text-align: center
        }
    </style>
</head>
<body>
<div id="contentWrapper">
    <div id="contentLeft">
        <ul id="leftNavigation">
            <li class="active">
                <a> 药品管理</a>
                <ul>
                    <a href="/DrugInStorage" id="drug">药品入库</a>
                    <a href="/DrugAdmin" id="pharmadmin">药品管理</a>
                </ul>
            </li>
            <li class="active">
                <a> 病例管理</a>
                <ul>
                    <li>
                        <a href="/addPatient" id="addPatient">添加患者</a>
                    </li>
                    <li>
                        <a href="/patientAdmin" id="patientAdmin">管理患者</a>
                    </li>
                </ul>
            </li>
            <li class="active">
                <a>患者接待</a>
                <ul>
                    <li>
                        <a href="/receptionMain" id="patientRecive">患者接待</a>
                    </li>
                    <li>
                        <a href="/toPay" id="receipt">收款</a>
                    </li>
                    <li>
                        <a href="/toTake" id="getMedicine">取药</a>
                    </li>
                </ul>
            </li>
            <li class="active">
                <a>系统管理</a>
                <ul>
                    <li>
                        <a href="/addUser" id="addAdmin">添加管理员</a>
                    </li>
                    <li>
                        <a href="/UserAdmin" id="UserAdmin">管理用户</a>
                    </li>
                </ul>
            </li>
            <li class="active">
                <a> 家庭病房管理</a>
                <ul>
                    <li>
                        <a href="/addHome" id="addHome">添加家庭病房</a>
                    </li>
                    <li>
                        <a href="/HomeAdmin" id="HomeAdmin">管理家庭病房</a>
                    </li>
                </ul>
            </li>
            <li class="active">
                <a>报表统计</a>
                <ul>
                    <li><a href="/itemChart" id="drugStatistics"> 药品统计</a></li>
                    <li><a href="/patientChart" id="patientStatistics">患者统计</a></li>
                    <li><a href="/logChart" id="moneyStatistics">收款金额统计</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="contentRight">
        <div class="title">
            <h2 id="patientInfo">药品统计</h2>
        </div>
        <hr size="3px" noshade=true color="#427c97">
        <div id="main" style="width: 600px;height:400px;position: absolute;right: 50px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var data = [];
            </script>
        <div style="position: absolute;left: 400px;top:150px">
            <table class="pure-table" id="mytable">
                <thead>
                <tr>
                    <th>药品类型</th>
                    <th>现有库存</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="Pie:${pieList}">
                    <td th:text="${Pie.getName()}"></td>
                    <td th:text="${Pie.getValue()}"></td>
                    <script type="text/javascript" th:inline="javascript">
                        /*<![CDATA[*/
                        data.push({
                            name:[[${Pie.getName()}]],
                            value:[[${Pie.getValue()}]]
                        })
                        /*]]>*/
                    </script>
                </tr>
                </tbody>
            </table>
        </div>
        <script type="text/javascript">
            option = {
                title: {
                    text: '药品类型占比统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                series: [
                    {
                        name: '类型',
                        type: 'pie',
                        radius: '55%',
                        center: ['40%', '50%'],
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>

    </div>
</div>
</div>
</body>
</html>